<template>
  <section>
    <div style="text-align:center; backgroundColor: #fff;    padding: 20px 120px;">
            <el-form :model="inputForm" label-position="left" label-width="100px" :rules="inputRule" ref='inputForm'>
                <el-form-item label="原密码" prop="oldPwd">
                <el-input type="password" v-model="inputForm.oldPwd" auto-complete="off" :maxlength="16"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newPwd">
                <el-input type="password" v-model="inputForm.newPwd" auto-complete="off" :maxlength="16"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="newPwd2">
                <el-input type="password" v-model="inputForm.newPwd2" auto-complete="off" :maxlength="16"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submit('inputForm')" :loading="inputFormLoading">确 定</el-button>
            </div>
    </div>
    <transition name="el-fade-in-linear">
          <div class="spin-container" v-if="gridLoading">
            <div class="spin1">
              <div class="spin2">
              </div>
                <div class="spin3">
              </div>
            </div>
          </div>
    </transition>
  </section>
</template>
<script>
import DataUtil from "../../common/dataUtil";
import { } from "@/api/index.js";
const formData = new FormData();
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      // var _reg = /^(?!([a-zA-Z]+|\d+)$)[a-zA-Z\d]{8,12}$/;
      if (value === "") {
        callback(new Error("请输入新密码"));
      } 
      // else if (!_reg.test(value)) {
      //   callback(new Error("密码应为8-16位数字字母组合"));
      // } 
      else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.inputForm.newPwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
    gridLoading : false,
    inputFormLoading : false,
    inputForm: {
        oldPwd: "",
        newPwd: "",
        newPwd2: ""
      },
    inputRule: {
        oldPwd: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur"
          }
        ],
        newPwd: [
          {
            validator: validatePass,
            required: true,
            trigger: "blur"
          }
        ],
        newPwd2: [
          {
            validator: validatePass2,
            required: true,
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    submit(formName) {
        this.$refs[formName].validate(valid => {
        if (valid) {
            formData.append("phone" , JSON.parse(DataUtil.userInfo()).phone);
            formData.append("oldPwd" , this.inputForm.oldPwd);
            formData.append("newPwd" , this.inputForm.newPwd);
          this.inputFormLoading = true;  
          sysUserPass(formData).then(
              response => {
                this.inputFormLoading = false;
                if ('01001' == response.status) {
                  this.$refs.inputForm.resetFields();
                  this.dialogVisible = false;
                  this.$message({
                    message: "密码修改成功",
                    type: "success",
                    onClose: () => {}
                  });
                } else {
                  this.$message.error(response.msg);
                  formData.delete("phone");
                  formData.delete("oldPwd");
                  formData.delete("newPwd");
                }
              },
              response => {
                this.inputFormLoading = false;
              }
            );
        }else{
            for(let key in this.inputForm){
              if(!this.form.oldPwd){
                  this.$message.error("原密码,不能为空！");
              }else if(!this.form.newPwd){
                  this.$message.error("新密码,不能为空！");
              }else if(!this.form.newPwd2 ){
                  this.$message.error("确认密码,不能为空！");
              }
            }
        }
      });
    }
  },
  mounted: function() {
    this.gridLoading = true;
    setTimeout(() => {
        this.gridLoading = false;
    }, 300);
  },
};
</script>
<style>
.blur {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -10%;
  margin-top: 0;
}
.el-pagination {
  display: inline-block;
  width: 80%;
}
.block {
  padding: 10px 0;
}
.spin-container {
    background: rgba(0,0,0,.1)!important;
}
</style>
